.container {
  width: 100%;

  padding: 16px;

  .overview {
    width: 100%;

    background: linear-gradient(101deg, #ff457a, #ff759d 100%);
    border-radius: 8px;

    padding: 16px;
    display: grid;
    grid-template:
      'avatar name' 1fr
      'avatar score' 1fr
      / min-content 1fr;
    align-items: center;
    gap: 4px 12px;

    .avatar {
      grid-area: avatar;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #fff;
    }

    .name {
      grid-area: name;
      font-size: 16px;
      line-height: 16px;
      color: #fff;
    }

    .score {
      grid-area: score;

      width: 100%;

      display: flex;

      &__text {
        font-size: 12px;
        color: #fff;
      }

      &__num {
        font-size: 12px;
        color: #ffdd7e;
      }

      &__stars {
        margin-left: 16px;
        display: flex;
        column-gap: 4px;

        &--item {
          width: 16px;
          height: 16px;
        }
      }

      &__people {
        margin-left: 16px;
        font-size: 12px;
        color: #fff;
      }
    }
  }

  .comment {
    width: 100%;

    padding: 16px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;

    &__total {
      font-size: 14px;
    }

    &__list {
      row-gap: 16px;

      display: flex;
      flex-direction: column;

      .comment__item {
        width: 100%;

        display: grid;
        grid-template:
          'avatar name time' min-content
          'avatar . .' 2px
          'avatar score .' min-content
          '. . .' 12px
          '. content content' min-content
          '. . .' 12px
          '. label-list label-list' min-content
          / min-content 1fr max-content;
        column-gap: 8px;

        .avatar {
          grid-area: avatar;
          align-self: center;
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }

        .name {
          grid-area: name;

          width: 100%;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          font-size: 14px;
          line-height: 20px;
          color: #333;
        }

        .time {
          grid-area: time;
          align-self: center;
          font-size: 10px;
          line-height: 14px;
          color: #999;
        }

        .score {
          grid-area: score;
          height: 14px;

          display: flex;
          align-items: center;
          column-gap: 8px;

          &__text {
            font-size: 12px;
            color: #333;
          }

          &__star-list {
            display: flex;
            column-gap: 4px;

            .star-list__item {
              width: 12px;
              height: 12px;
            }
          }
        }

        .content {
          grid-area: content;
          font-size: 14px;
          color: #333;
        }

        .label-list {
          grid-area: label-list;

          display: flex;
          flex-wrap: wrap;
          gap: 8px;

          &__item {
            height: 25px;
            background: rgba(255, 69, 122, 0.2);
            border: 1px solid #ff457a;
            border-radius: 14px;

            padding: 4px 12px;
            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 12px;
            color: #ff457a;
          }
        }
      }
    }
  }
}
